<template>
  <div style="display: flex;flex-direction: column;align-items: center">
    <div style="margin-top: 18px;margin-left: 18px;align-self: flex-start;cursor: pointer;" @click="goBack()">
      <i class="el-icon-back">返回</i>
    </div>
    <div style="margin: 40px 0"><h1>膳食管理</h1></div>
    <el-card style="width: 80%">
      <el-row style="text-align: center">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
          <el-form-item label="食物名称">
            <el-input v-model="searchData.name" placeholder="输入食物名称"></el-input>
          </el-form-item>
          <el-form-item label="食物分类">
            <el-select v-model="searchData.category" placeholder="选择食物分类" clearable>
              <el-option label="主食类" value="1"></el-option>
              <el-option label="肉蛋类" value="2"></el-option>
              <el-option label="大豆及制品类" value="3"></el-option>
              <el-option label="蔬菜菌藻类" value="4"></el-option>
              <el-option label="水果类" value="5"></el-option>
              <el-option label="奶类及奶制品类" value="6"></el-option>
              <el-option label="油脂类" value="7"></el-option>
              <el-option label="坚果类" value="8"></el-option>
              <el-option label="调味品类" value="9"></el-option>
              <el-option label="饮料类" value="10"></el-option>
              <el-option label="零食及冷饮类" value="11"></el-option>
              <el-option label="其他" value="12"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="initData()">查询</el-button>
            <el-button type="primary" v-show="user.roleId === 1" @click="addFood()">新增</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px">
          <el-table-column
              prop="name"
              label="名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="healthLevel"
              label="推荐"
              :formatter="recommendationFormatter"
              align="center">
          </el-table-column>
          <el-table-column
              prop="calory"
              label="热量(千卡/100ml/100g)"
              width="180">
          </el-table-column>
          <el-table-column
              prop="category"
              align="center"
              label="分类"
              :formatter="categoryFormatter"
              width="180">
          </el-table-column>

          <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="230">
            <template slot-scope="scope">
              <el-button
                  @click.native.prevent="showRow(scope.$index, tableData)"
                  size="small">
                查看
              </el-button>
              <el-button
                  @click.native.prevent="updateRow(scope.$index, tableData)"
                  size="small">
                编辑
              </el-button>
              <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center">
          <!--分页-->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchData.pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="searchData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="searchData.total">
          </el-pagination>
        </div>
      </el-row>
      <el-dialog :title="title"
                 width="80%"
                 :modal="false"
                 :before-close="handleClose"
                 :visible.sync="dialogVisible">
        <div style="width: 100%;display: flex;align-items: center;flex-direction: column">
          <el-form :model="foodDataInfo" ref="foodDataInfo" :inline="true" label-width="120px" class="demo-form-inline"
                   label-position="left">
            <el-form-item label="名称" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
              <el-input v-model="foodDataInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="分类" :rules="[{ required: true, message: '请选择分类', trigger: 'blur' }]">
              <el-select v-model="foodDataInfo.category" placeholder="选择食物分类" clearable>
                <el-option label="主食类" value="1"></el-option>
                <el-option label="肉蛋类" value="2"></el-option>
                <el-option label="大豆及制品类" value="3"></el-option>
                <el-option label="蔬菜菌藻类" value="4"></el-option>
                <el-option label="水果类" value="5"></el-option>
                <el-option label="奶类及奶制品类" value="6"></el-option>
                <el-option label="油脂类" value="7"></el-option>
                <el-option label="坚果类" value="8"></el-option>
                <el-option label="调味品类" value="9"></el-option>
                <el-option label="饮料类" value="10"></el-option>
                <el-option label="零食及冷饮类" value="11"></el-option>
                <el-option label="其他" value="12"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康等级" :rules="[{ required: true, message: '请选择推荐等级', trigger: 'blur' }]">
              <el-select v-model="foodDataInfo.healthLight" placeholder="请选择" clearable>
                <el-option label="推荐" value="1"></el-option>
                <el-option label="适量" value="2"></el-option>
                <el-option label="少量" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-form-item label="能量" :rules="[{ required: true, message: '请输入食物提供的能量', trigger: 'blur' }]">
                <el-input type="number" v-model="foodDataInfo.calory" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="能量单位" :rules="[{ required: true, message: '请输入食物提供的能量的单位', trigger: 'blur' }]">
                <el-input v-model="foodDataInfo.caloryUnit" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="热量">
                <el-input type="number" v-model="foodDataInfo.joule"></el-input>
              </el-form-item>
              <el-form-item label="热量单位">
                <el-input v-model="foodDataInfo.jouleUnit"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="蛋白质值">
                <el-input type="number" v-model="foodDataInfo.protein"></el-input>
              </el-form-item>
              <el-form-item label="蛋白质单位">
                <el-select v-model="foodDataInfo.proteinUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="脂肪值">
                <el-input type="number" v-model="foodDataInfo.fat"></el-input>
              </el-form-item>
              <el-form-item label="脂肪单位">
                <el-select v-model="foodDataInfo.fatUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="饱和脂肪值">
                <el-input type="number" v-model="foodDataInfo.saturatedFat"></el-input>
              </el-form-item>
              <el-form-item label="饱和脂肪值单位">
                <el-select v-model="foodDataInfo.saturatedFatUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="反式脂肪值">
                <el-input type="number" v-model="foodDataInfo.fattyAcid"></el-input>
              </el-form-item>
              <el-form-item label="反式脂肪单位">
                <el-select v-model="foodDataInfo.fattyAcidUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="单不饱和脂肪值">
                <el-input type="number" v-model="foodDataInfo.mufa"></el-input>
              </el-form-item>
              <el-form-item label="单不饱和脂肪值单位">
                <el-select v-model="foodDataInfo.mufaUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="多不饱和脂肪值">
                <el-input type="number" v-model="foodDataInfo.pufa"></el-input>
              </el-form-item>
              <el-form-item label="多不饱和脂肪值单位">
                <el-select v-model="foodDataInfo.pufaUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="胆固醇值">
                <el-input type="number" v-model="foodDataInfo.cholesterol"></el-input>
              </el-form-item>
              <el-form-item label="胆固醇值单位">
                <el-select v-model="foodDataInfo.cholesterolUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="碳水化合物值">
                <el-input type="number" v-model="foodDataInfo.carbohydrate"></el-input>
              </el-form-item>
              <el-form-item label="碳水化合物值单位">
                <el-select v-model="foodDataInfo.carbohydrateUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="糖值">
                <el-input type="number" v-model="foodDataInfo.sugar"></el-input>
              </el-form-item>
              <el-form-item label="糖值单位">
                <el-select v-model="foodDataInfo.sugarUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="膳食纤维值">
                <el-input type="number" v-model="foodDataInfo.fiberDietary"></el-input>
              </el-form-item>
              <el-form-item label="膳食纤维值单位">
                <el-select v-model="foodDataInfo.fiberDietaryUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="钠值">
                <el-input type="number" v-model="foodDataInfo.natrium"></el-input>
              </el-form-item>
              <el-form-item label="钠值单位">
                <el-select v-model="foodDataInfo.natriumUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="酒精度值">
                <el-input type="number" v-model="foodDataInfo.alcohol"></el-input>
              </el-form-item>
              <el-form-item label="酒精度值单位">
                <el-select v-model="foodDataInfo.alcoholUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="维生素A值">
                <el-input type="number" v-model="foodDataInfo.vitaminA"></el-input>
              </el-form-item>
              <el-form-item label="维生素A值单位">
                <el-select v-model="foodDataInfo.vitaminAUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="胡萝卜素值">
                <el-input type="number" v-model="foodDataInfo.carotene"></el-input>
              </el-form-item>
              <el-form-item label="胡萝卜素值单位">
                <el-select v-model="foodDataInfo.caroteneUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="维生素D值">
                <el-input type="number" v-model="foodDataInfo.vitaminD"></el-input>
              </el-form-item>
              <el-form-item label="维生素D值单位">
                <el-select v-model="foodDataInfo.vitaminDUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="维生素E值">
                <el-input type="number" v-model="foodDataInfo.vitaminE"></el-input>
              </el-form-item>
              <el-form-item label="维生素E值单位">
                <el-select v-model="foodDataInfo.vitaminEUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="维生素K值">
                <el-input type="number" v-model="foodDataInfo.vitaminK"></el-input>
              </el-form-item>
              <el-form-item label="维生素K值单位">
                <el-select v-model="foodDataInfo.vitaminKUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="维生素B1值">
                <el-input type="number" v-model="foodDataInfo.thiamine"></el-input>
              </el-form-item>
              <el-form-item label="维生素B1值单位">
                <el-select v-model="foodDataInfo.thiamineUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="维生素B2值">
                <el-input type="number" v-model="foodDataInfo.lactoflavin"></el-input>
              </el-form-item>
              <el-form-item label="维生素B2值单位">
                <el-select v-model="foodDataInfo.lactoflavinUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="维生素B6值">
                <el-input type="number" v-model="foodDataInfo.vitaminB6"></el-input>
              </el-form-item>
              <el-form-item label="维生素B6值单位">
                <el-select v-model="foodDataInfo.vitaminB6Unit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="维生素B12值">
                <el-input type="number" v-model="foodDataInfo.vitaminB12"></el-input>
              </el-form-item>
              <el-form-item label="维生素B12值单位">
                <el-select v-model="foodDataInfo.vitaminB12Unit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="维生素C值">
                <el-input type="number" v-model="foodDataInfo.vitaminC"></el-input>
              </el-form-item>
              <el-form-item label="维生素C值单位">
                <el-select v-model="foodDataInfo.vitaminCUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="烟酸值">
                <el-input type="number" v-model="foodDataInfo.niacin"></el-input>
              </el-form-item>
              <el-form-item label="烟酸值单位">
                <el-select v-model="foodDataInfo.niacinUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="叶酸值">
                <el-input type="number" v-model="foodDataInfo.folacin"></el-input>
              </el-form-item>
              <el-form-item label="叶酸值单位">
                <el-select v-model="foodDataInfo.folacinUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="泛酸值">
                <el-input type="number" v-model="foodDataInfo.pantothenic"></el-input>
              </el-form-item>
              <el-form-item label="泛酸值单位">
                <el-select v-model="foodDataInfo.pantothenicUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="生物素值">
                <el-input type="number" v-model="foodDataInfo.biotin"></el-input>
              </el-form-item>
              <el-form-item label="生物素值单位">
                <el-select v-model="foodDataInfo.biotinUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="胆碱值">
                <el-input type="number" v-model="foodDataInfo.choline"></el-input>
              </el-form-item>
              <el-form-item label="胆碱值单位">
                <el-select v-model="foodDataInfo.cholineUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="磷值">
                <el-input type="number" v-model="foodDataInfo.phosphor"></el-input>
              </el-form-item>
              <el-form-item label="磷值单位">
                <el-select v-model="foodDataInfo.phosphorUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="钾值">
                <el-input type="number" v-model="foodDataInfo.kalium"></el-input>
              </el-form-item>
              <el-form-item label="钾值单位">
                <el-select v-model="foodDataInfo.kaliumUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="镁值">
                <el-input type="number" v-model="foodDataInfo.magnesium"></el-input>
              </el-form-item>
              <el-form-item label="镁值单位">
                <el-select v-model="foodDataInfo.magnesiumUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="钙值">
                <el-input type="number" v-model="foodDataInfo.calcium"></el-input>
              </el-form-item>
              <el-form-item label="钙值单位">
                <el-select v-model="foodDataInfo.calciumUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="铁值">
                <el-input type="number" v-model="foodDataInfo.iron"></el-input>
              </el-form-item>
              <el-form-item label="铁值单位">
                <el-select v-model="foodDataInfo.ironUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="锌值">
                <el-input type="number" v-model="foodDataInfo.zinc"></el-input>
              </el-form-item>
              <el-form-item label="锌值单位">
                <el-select v-model="foodDataInfo.zincUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="碘值">
                <el-input type="number" v-model="foodDataInfo.iodine"></el-input>
              </el-form-item>
              <el-form-item label="碘值单位">
                <el-select v-model="foodDataInfo.iodineUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="硒值">
                <el-input type="number" v-model="foodDataInfo.selenium"></el-input>
              </el-form-item>
              <el-form-item label="硒值单位">
                <el-select v-model="foodDataInfo.seleniumUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="铜值">
                <el-input type="number" v-model="foodDataInfo.copper"></el-input>
              </el-form-item>
              <el-form-item label="铜值单位">
                <el-select v-model="foodDataInfo.copperUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="氟值">
                <el-input type="number" v-model="foodDataInfo.fluorine"></el-input>
              </el-form-item>
              <el-form-item label="氟值单位">
                <el-select v-model="foodDataInfo.fluorineUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="锰值">
                <el-input type="number" v-model="foodDataInfo.manganese"></el-input>
              </el-form-item>
              <el-form-item label="锰值单位">
                <el-select v-model="foodDataInfo.manganeseUnit" placeholder="请选择" clearable>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="毫克" value="毫克"></el-option>
                  <el-option label="微克" value="微克"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="GI值">
                <el-input type="number" v-model="foodDataInfo.giValue"></el-input>
              </el-form-item>
              <el-form-item label="GI等级">
                <el-select v-model="foodDataInfo.giLabel" placeholder="请选择" clearable>
                  <el-option label="低GI" value="低GI"></el-option>
                  <el-option label="中GI" value="中GI"></el-option>
                  <el-option label="高GI" value="高GI"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="GL值">
                <el-input type="number" v-model="foodDataInfo.glValue"></el-input>
              </el-form-item>
              <el-form-item label="GL等级">
                <el-select v-model="foodDataInfo.glLabel" placeholder="请选择" clearable>
                  <el-option label="低GL" value="低GL"></el-option>
                  <el-option label="中GL" value="中GL"></el-option>
                  <el-option label="高GL" value="高GL"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

          </el-form>
          <div>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="handleClose()">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="查看食物成分"
                 width="80%"
                 :modal="false"
                 :before-close="handleShowClose"
                 :visible.sync="dialogShowVisible">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item label="名称">{{ this.foodDataInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="健康等级1 2 3分别是推荐 适量 少吃">{{ this.foodDataInfo.healthLight }}</el-descriptions-item>
          <el-descriptions-item label="分类">{{ this.foodDataInfo.category }}</el-descriptions-item>
          <el-descriptions-item label="热量值">{{ this.foodDataInfo.calory }}</el-descriptions-item>
          <el-descriptions-item label="热量单位">{{ this.foodDataInfo.caloryUnit }}</el-descriptions-item>
          <el-descriptions-item label="热量千焦值">{{ this.foodDataInfo.joule }}</el-descriptions-item>
          <el-descriptions-item label="热量单位">{{ this.foodDataInfo.jouleUnit }}</el-descriptions-item>
          <el-descriptions-item label="蛋白质值">{{ this.foodDataInfo.protein }}</el-descriptions-item>
          <el-descriptions-item label="蛋白质单位">{{ this.foodDataInfo.proteinUnit }}</el-descriptions-item>
          <el-descriptions-item label="脂肪值">{{ this.foodDataInfo.fat }}</el-descriptions-item>
          <el-descriptions-item label="脂肪单位">{{ this.foodDataInfo.fatUnit }}</el-descriptions-item>
          <el-descriptions-item label="饱和脂肪值">{{ this.foodDataInfo.saturatedFat }}</el-descriptions-item>
          <el-descriptions-item label="饱和脂肪值单位">{{ this.foodDataInfo.saturatedFatUnit }}</el-descriptions-item>
          <el-descriptions-item label="反式脂肪值">{{ this.foodDataInfo.fattyAcid }}</el-descriptions-item>
          <el-descriptions-item label="反式脂肪单位">{{ this.foodDataInfo.fattyAcidUnit }}</el-descriptions-item>
          <el-descriptions-item label="单不饱和脂肪值">{{ this.foodDataInfo.mufa }}</el-descriptions-item>
          <el-descriptions-item label="单不饱和脂肪值单位">{{ this.foodDataInfo.mufaUnit }}</el-descriptions-item>
          <el-descriptions-item label="多不饱和脂肪值">{{ this.foodDataInfo.pufa }}</el-descriptions-item>
          <el-descriptions-item label="多不饱和脂肪值单位">{{ this.foodDataInfo.pufaUnit }}</el-descriptions-item>
          <el-descriptions-item label="胆固醇值">{{ this.foodDataInfo.cholesterol }}</el-descriptions-item>
          <el-descriptions-item label="胆固醇值单位">{{ this.foodDataInfo.cholesterolUnit }}</el-descriptions-item>
          <el-descriptions-item label="碳水化合物值">{{ this.foodDataInfo.carbohydrate }}</el-descriptions-item>
          <el-descriptions-item label="碳水化合物值单位">{{ this.foodDataInfo.carbohydrateUnit }}</el-descriptions-item>
          <el-descriptions-item label="糖值">{{ this.foodDataInfo.sugar }}</el-descriptions-item>
          <el-descriptions-item label="糖值单位">{{ this.foodDataInfo.sugarUnit }}</el-descriptions-item>
          <el-descriptions-item label="膳食纤维值">{{ this.foodDataInfo.fiberDietary }}</el-descriptions-item>
          <el-descriptions-item label="膳食纤维值单位">{{ this.foodDataInfo.fiberDietaryUnit }}</el-descriptions-item>
          <el-descriptions-item label="钠值">{{ this.foodDataInfo.natrium }}</el-descriptions-item>
          <el-descriptions-item label="钠值单位">{{ this.foodDataInfo.natriumUnit }}</el-descriptions-item>
          <el-descriptions-item label="酒精度值">{{ this.foodDataInfo.alcohol }}</el-descriptions-item>
          <el-descriptions-item label="酒精度值单位">{{ this.foodDataInfo.alcoholUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素A值">{{ this.foodDataInfo.vitaminA }}</el-descriptions-item>
          <el-descriptions-item label="维生素A值单位">{{ this.foodDataInfo.vitaminAUnit }}</el-descriptions-item>
          <el-descriptions-item label="胡萝卜素值">{{ this.foodDataInfo.carotene }}</el-descriptions-item>
          <el-descriptions-item label="胡萝卜素值单位">{{ this.foodDataInfo.caroteneUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素D值">{{ this.foodDataInfo.vitaminD }}</el-descriptions-item>
          <el-descriptions-item label="维生素D值单位">{{ this.foodDataInfo.vitaminDUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素E值">{{ this.foodDataInfo.vitaminE }}</el-descriptions-item>
          <el-descriptions-item label="维生素E值单位">{{ this.foodDataInfo.vitaminEUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素K值">{{ this.foodDataInfo.vitaminK }}</el-descriptions-item>
          <el-descriptions-item label="维生素K值单位">{{ this.foodDataInfo.vitaminKUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素B1值">{{ this.foodDataInfo.thiamine }}</el-descriptions-item>
          <el-descriptions-item label="维生素B1值单位">{{ this.foodDataInfo.thiamineUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素B2值">{{ this.foodDataInfo.lactoflavin }}</el-descriptions-item>
          <el-descriptions-item label="维生素B2值单位">{{ this.foodDataInfo.lactoflavinUnit }}</el-descriptions-item>
          <el-descriptions-item label="维生素B6值">{{ this.foodDataInfo.vitaminB6 }}</el-descriptions-item>
          <el-descriptions-item label="维生素B6值单位">{{ this.foodDataInfo.vitaminB6Unit }}</el-descriptions-item>
          <el-descriptions-item label="维生素B12值">{{ this.foodDataInfo.vitaminB12 }}</el-descriptions-item>
          <el-descriptions-item label="维生素B12值单位">{{ this.foodDataInfo.vitaminB12Unit }}</el-descriptions-item>
          <el-descriptions-item label="维生素C值">{{ this.foodDataInfo.vitaminC }}</el-descriptions-item>
          <el-descriptions-item label="维生素C值单位">{{ this.foodDataInfo.vitaminCUnit }}</el-descriptions-item>
          <el-descriptions-item label="烟酸值">{{ this.foodDataInfo.niacin }}</el-descriptions-item>
          <el-descriptions-item label="烟酸值单位">{{ this.foodDataInfo.niacinUnit }}</el-descriptions-item>
          <el-descriptions-item label="叶酸值">{{ this.foodDataInfo.folacin }}</el-descriptions-item>
          <el-descriptions-item label="叶酸值单位">{{ this.foodDataInfo.folacinUnit }}</el-descriptions-item>
          <el-descriptions-item label="泛酸值">{{ this.foodDataInfo.pantothenic }}</el-descriptions-item>
          <el-descriptions-item label="泛酸值单位">{{ this.foodDataInfo.pantothenicUnit }}</el-descriptions-item>
          <el-descriptions-item label="生物素值">{{ this.foodDataInfo.biotin }}</el-descriptions-item>
          <el-descriptions-item label="生物素值单位">{{ this.foodDataInfo.biotinUnit }}</el-descriptions-item>
          <el-descriptions-item label="胆碱值">{{ this.foodDataInfo.choline }}</el-descriptions-item>
          <el-descriptions-item label="胆碱值单位">{{ this.foodDataInfo.cholineUnit }}</el-descriptions-item>
          <el-descriptions-item label="磷值">{{ this.foodDataInfo.phosphor }}</el-descriptions-item>
          <el-descriptions-item label="磷值单位">{{ this.foodDataInfo.phosphorUnit }}</el-descriptions-item>
          <el-descriptions-item label="钾值">{{ this.foodDataInfo.kalium }}</el-descriptions-item>
          <el-descriptions-item label="钾值单位">{{ this.foodDataInfo.kaliumUnit }}</el-descriptions-item>
          <el-descriptions-item label="镁值">{{ this.foodDataInfo.magnesium }}</el-descriptions-item>
          <el-descriptions-item label="镁值单位">{{ this.foodDataInfo.magnesiumUnit }}</el-descriptions-item>
          <el-descriptions-item label="钙值">{{ this.foodDataInfo.calcium }}</el-descriptions-item>
          <el-descriptions-item label="钙值单位">{{ this.foodDataInfo.calciumUnit }}</el-descriptions-item>
          <el-descriptions-item label="铁值">{{ this.foodDataInfo.iron }}</el-descriptions-item>
          <el-descriptions-item label="铁值单位">{{ this.foodDataInfo.ironUnit }}</el-descriptions-item>
          <el-descriptions-item label="锌值">{{ this.foodDataInfo.zinc }}</el-descriptions-item>
          <el-descriptions-item label="锌值单位">{{ this.foodDataInfo.zincUnit }}</el-descriptions-item>
          <el-descriptions-item label="碘值">{{ this.foodDataInfo.iodine }}</el-descriptions-item>
          <el-descriptions-item label="碘值单位">{{ this.foodDataInfo.iodineUnit }}</el-descriptions-item>
          <el-descriptions-item label="硒值">{{ this.foodDataInfo.selenium }}</el-descriptions-item>
          <el-descriptions-item label="硒值单位">{{ this.foodDataInfo.seleniumUnit }}</el-descriptions-item>
          <el-descriptions-item label="铜值">{{ this.foodDataInfo.copper }}</el-descriptions-item>
          <el-descriptions-item label="铜值单位">{{ this.foodDataInfo.copperUnit }}</el-descriptions-item>
          <el-descriptions-item label="氟值">{{ this.foodDataInfo.fluorine }}</el-descriptions-item>
          <el-descriptions-item label="氟值单位">{{ this.foodDataInfo.fluorineUnit }}</el-descriptions-item>
          <el-descriptions-item label="锰值">{{ this.foodDataInfo.manganese }}</el-descriptions-item>
          <el-descriptions-item label="锰值单位">{{ this.foodDataInfo.manganeseUnit }}</el-descriptions-item>
          <el-descriptions-item label="GI值">{{ this.foodDataInfo.giValue }}</el-descriptions-item>
          <el-descriptions-item label="GI表述">{{ this.foodDataInfo.giLabel }}</el-descriptions-item>
          <el-descriptions-item label="GL值">{{ this.foodDataInfo.glValue }}</el-descriptions-item>
          <el-descriptions-item label="GL表述">{{ this.foodDataInfo.glLabel }}</el-descriptions-item>
        </el-descriptions>
        <div style="width: 100%;display: flex;align-items: center;flex-direction: column">
          <el-button @click="handleShowClose" type="primary">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import Message from '../../components/messages/index.js'

export default {
  name: "FoodList",
  data() {
    return {
      searchData: {
        total: 0,
        pageSize: 10,
        pageNum: 0,
        name: "",
        category: ""
      },
      tableData: [],
      title: "",
      dialogVisible: false,
      foodDataInfo: {
        foodId: "",
        name: "",
        healthLight: "1",
        category: "",
        calory: 0.00,
        caloryUnit: "千卡",
        joule: 0.00,
        jouleUnit: "千焦",
        protein: 0.00,
        proteinUnit: "克",
        fat: 0.00,
        fatUnit: "克",
        saturatedFat: 0.00,
        saturatedFatUnit: "克",
        fattyAcid: 0,
        fattyAcidUnit: "克",
        mufa: 0,
        mufaUnit: "克",
        pufa: 0,
        pufaUnit: "克",
        cholesterol: 0,
        cholesterolUnit: "毫克",
        carbohydrate: 0,
        carbohydrateUnit: "克",
        sugar: 0,
        sugarUnit: "克",
        fiberDietary: 0,
        fiberDietaryUnit: "克",
        natrium: 0,
        natriumUnit: "毫克",
        alcohol: 0,
        alcoholUnit: "%vol",
        vitaminA: 0,
        vitaminAUnit: "微克",
        carotene: 0,
        caroteneUnit: "微克",
        vitaminD: 0,
        vitaminDUnit: "微克",
        vitaminE: 0,
        vitaminEUnit: "微克",
        vitaminK: 0,
        vitaminKUnit: "微克",
        thiamine: 0,
        thiamineUnit: "毫克",
        lactoflavin: 0,
        lactoflavinUnit: "毫克",
        vitaminB6: 0,
        vitaminB6Unit: "毫克",
        vitaminB12: 0,
        vitaminB12Unit: "微克",
        vitaminC: 0,
        vitaminCUnit: "毫克",
        niacin: 0,
        niacinUnit: "毫克",
        folacin: 0,
        folacinUnit: "微克",
        pantothenic: 0,
        pantothenicUnit: "毫克",
        biotin: 0,
        biotinUnit: "微克",
        choline: 0,
        cholineUnit: "毫克",
        phosphor: 0,
        phosphorUnit: "毫克",
        kalium: 0,
        kaliumUnit: "毫克",
        magnesium: 0,
        magnesiumUnit: "毫克",
        calcium: 0,
        calciumUnit: "毫克",
        iron: 0,
        ironUnit: "毫克",
        zinc: 0,
        zincUnit: "毫克",
        iodine: 0,
        iodineUnit: "微克",
        selenium: 0,
        seleniumUnit: "微克",
        copper: 0,
        copperUnit: "毫克",
        fluorine: 0,
        fluorineUnit: "毫克",
        manganese: 0,
        manganeseUnit: "毫克",
        giValue: "",
        giLabel: "",
        glValue: "",
        glLabel: ""
      },
      user: JSON.parse(localStorage.getItem("user")),
      dialogShowVisible: false,
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    goBack(){
      window.history.back()
    },
    handleShowClose() {
      this.dialogShowVisible = false
    },
    showRow(index, data) {
      this.$http.get("/food/get/" + data[index].foodId).then(res => {
        if (res.status === 200) {
          this.foodDataInfo = res.data;
        }
      })
      this.dialogShowVisible = true
    },
    handleClose() {
      this.dialogVisible = false;
    }
    ,
    initFormData() {
      this.foodDataInfo = {
        foodId: "",
        name: "",
        healthLight: "1",
        category: "",
        calory: 0.00,
        caloryUnit: "千卡",
        joule: 0.00,
        jouleUnit: "千焦",
        protein: 0.00,
        proteinUnit: "克",
        fat: 0.00,
        fatUnit: "克",
        saturatedFat: 0.00,
        saturatedFatUnit: "克",
        fattyAcid: 0,
        fattyAcidUnit: "克",
        mufa: 0,
        mufaUnit: "克",
        pufa: 0,
        pufaUnit: "克",
        cholesterol: 0,
        cholesterolUnit: "毫克",
        carbohydrate: 0,
        carbohydrateUnit: "克",
        sugar: 0,
        sugarUnit: "克",
        fiberDietary: 0,
        fiberDietaryUnit: "克",
        natrium: 0,
        natriumUnit: "毫克",
        alcohol: 0,
        alcoholUnit: "%vol",
        vitaminA: 0,
        vitaminAUnit: "微克",
        carotene: 0,
        caroteneUnit: "微克",
        vitaminD: 0,
        vitaminDUnit: "微克",
        vitaminE: 0,
        vitaminEUnit: "微克",
        vitaminK: 0,
        vitaminKUnit: "微克",
        thiamine: 0,
        thiamineUnit: "毫克",
        lactoflavin: 0,
        lactoflavinUnit: "毫克",
        vitaminB6: 0,
        vitaminB6Unit: "毫克",
        vitaminB12: 0,
        vitaminB12Unit: "微克",
        vitaminC: 0,
        vitaminCUnit: "毫克",
        niacin: 0,
        niacinUnit: "毫克",
        folacin: 0,
        folacinUnit: "微克",
        pantothenic: 0,
        pantothenicUnit: "毫克",
        biotin: 0,
        biotinUnit: "微克",
        choline: 0,
        cholineUnit: "毫克",
        phosphor: 0,
        phosphorUnit: "毫克",
        kalium: 0,
        kaliumUnit: "毫克",
        magnesium: 0,
        magnesiumUnit: "毫克",
        calcium: 0,
        calciumUnit: "毫克",
        iron: 0,
        ironUnit: "毫克",
        zinc: 0,
        zincUnit: "毫克",
        iodine: 0,
        iodineUnit: "微克",
        selenium: 0,
        seleniumUnit: "微克",
        copper: 0,
        copperUnit: "毫克",
        fluorine: 0,
        fluorineUnit: "毫克",
        manganese: 0,
        manganeseUnit: "毫克",
        giValue: "",
        giLabel: "",
        glValue: "",
        glLabel: ""
      }
    },
    updateRow(index, data) {
      this.title = "编辑食物";
      this.$http.get("/food/get/" + data[index].foodId).then(res => {
        if (res.status === 200) {
          this.foodDataInfo = res.data;
          this.foodDataInfo.foodId = data[index].foodId;
          this.dialogVisible = true;
        }
      })
    },
    deleteRow(index, tableDate) {
      Message.confirm("是否删除该食物?").then(() => {
        this.$http.get("/food/delete/" + tableDate[index].foodId).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.searchData.name = "";
            this.searchData.category = "";
            this.initData();
          }
        })
      })
    },
    submitForm() {
      if (this.foodDataInfo.foodId == null || this.foodDataInfo.foodId === "") {
        //新增
        this.$http.post("/food/add", this.foodDataInfo).then((res) => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.dialogVisible = false;
            this.initFormData();
            this.initData();
          }
        })
      } else {
        this.$http.post("/food/update", this.foodDataInfo).then((res) => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.dialogVisible = false;
            this.initFormData();
            this.initData();
          }
        })
      }
    }
    ,
    addFood() {
      this.title = "新增食物";
      this.dialogVisible = true;
    }
    ,
    categoryFormatter(row) {
      switch (row.category) {
        case 1 :
          return "主食类";
        case 2 :
          return "肉蛋类";
        case 3 :
          return "大豆及制品";
        case 4 :
          return "蔬菜菌藻类";
        case 5 :
          return "水果类";
        case 6 :
          return "奶类";
        case 7 :
          return "油脂类";
        case 8 :
          return "坚果类";
        case 9 :
          return "调味品";
        case 10 :
          return "饮料类";
        case 11 :
          return "零食及冷饮";
        default:
          return "其他";
      }
    }
    ,
    recommendationFormatter(row) {
      switch (row.healthLevel) {
        case 1 :
          return "推荐";
        case 2 :
          return "适量";
        case 3 :
          return "少吃";
        default:
          return "";
      }
    }
    ,
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.initData();
    }
    ,
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.initData();
    }
    ,
    initData() {
      this.$http.post("/food/page", this.searchData).then((res) => {
        this.tableData = res.data.records;
        this.searchData.total = res.data.total;
        this.searchData.pageNum = res.data.current;
        this.searchData.pageSize = res.data.size;
      })
    }
  }
}
</script>
<style scoped>

</style>